<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form style="margin-bottom: 50px;">
            <div>姓名：<input v-model="user.name" type="text"></div>
            <div>年龄：<input v-model="user.age" type="text"></div>
            <div>性别：
                <input type="radio" v-model="user.gender" value="男">男
                <input type="radio" v-model="user.gender" value="女">女
                <input type="radio" v-model="user.gender" value="不男不女">不男不女
            </div>
            <div><input type="reset" value="重置">
                <input type="button" value="添加" @click="addData()"></div>
        </form>
        <div>
            <table border=1 width=700>
                <thead>
                    <tr>
                        <th>全选<input type="checkbox" @change="chooseAllState()" v-model="allState"></th>
                        <th>id</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody style="text-align: center;">
                    <tr v-for="(u,i) in users" :key="i">
                        <td><input type="checkbox" v-model="u.state" @change="checkItem()"></td>
                        <td>{{i+1}}</td>
                        <td>{{u.name}}</td>
                        <td>{{u.age}}</td>
                        <td>{{u.gender}}</td>
                        <td><input class="del" @click="removeDate(i)" type="button" value="删除"></td>
                    </tr>
                </tbody>
                <tfoot style="text-align: center;">
                    <tr class="text-center text-muted" v-if="users.length==0">
                        <td colspan="6">暂无数据……</td>
                    </tr>
                    <tr class="text-center" v-if="users.length!=0">
                        <td>
                            <button class="btn btn-danger btn-sm" @click="removeDate(-2)">删除选择项</button>
                        </td>
                        <td colspan="4"></td>
                        <td>
                            <button class="btn btn-danger btn-sm" @click="removeDate(-1)">清空数据</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            // name:"",
            // age:"",
            // gender:"",
            user: {
                name: "",
                age: "",
                sex: "",
                state: false
            },
            users: [
                { name: "ailcs", age: 23, gender: "男", state: false },
                { name: "as", age: 26, gender: "nv", state: false },
                { name: "jong", age: 24, gender: "男", state: false },
                { name: "json", age: 28, gender: "男", state: false },
            ],
            allState: false
        },
        methods: {
            removeDate(index) {
                if(index >= 0){
                    this.users.splice(index, 1);
                }else if (index == -1){
                    this.users = [];
                } else {
                    // 循环中出现了对循环本体数据的操作，该操作是否会影响循环界限
                    // 倒叙循环
                    for (let i = this.users.length - 1; i >= 0; i--){
                        if(this.users[i].state){
                            this.users.splice(i, 1);
                        }
                    }
                }
                this.checkItem();
            },
            addData() {
                // let obj={
                //     name:this.name,
                //     age:this.age,
                //     gender:this.gender
                // }
                this.users.push(this.user);
                // console.log(this.user);
                this.user = {};
                this.checkItem();
            },
            chooseAllState() {
                for(let i = 0; i < this.users.length; i++){
                    this.users[i].state = this.allState;
                }
            },
            checkItem() {
                // 假设为都为true
                // this.allState = true;
                this.allState = this.users.length > 0;
                for (let i = 0; i < this.users.length;i++) {
                    if(!this.users[i].state){
                        this.allState = false;
                        return;
                    }
                }
            }
        }
    })
</script>

</html>